<template>
  <div class="container">
    <div class="container--item__header">
      <img src="../../img/shoppingCart.png" alt="#">
      <input type="text">
    </div>
    <ul class="container--item__list">
      <li>推荐</li>
      <li>美妆</li>
      <li>百货</li>
      <li>腕表</li>
      <li>家电</li>
    </ul>
    <swiper
    :indicator-dots="true"
    :autoplay="true"
    :circular="true"
    :interval="1500"
    >
      <block v-for="(item, index) in imgUrl" :key="index">
        <swiper-item>
          <img :src="item.bannerUrl" class="slide-image"/>
        </swiper-item>
      </block>
    </swiper>
  </div>
</template>

<script>

export default {
  data () {
    return {
      imgUrl: null
    }
  },
  created () {
    this.$http.get('http://129.204.112.231:8000/banner')
      .then((data) => {
        this.imgUrl = data.data.data
      })
      .catch(error => console.log(error))
  }
}
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.container{
  width: 100vw;
  .container--item__header{
    position: relative;
    width: 100vw;
    height: 70rpx;
    background-color: rebeccapurple;
    img{
      width: 38rpx;
      height: 38rpx;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 30rpx;
      display: block;
      margin: auto 0;
    }
    input{
      display: inline-block;
      width: 80%;
      height: 38rpx;
      background-color: silver;
      position: absolute;
      right: 30rpx;
      top: 0;
      bottom: 0;
      margin: auto 0;
      font-size: 24rpx;
      border-radius: 60rpx;
    }
  }
  .container--item__list{
    width: 100vw;
    list-style: none;
    height: 75rpx;
    border-bottom: 2rpx solid #ccc;
    li{
      display: inline-block;
      text-align: center;
      width: 20%;
      line-height: 75rpx;
      font-size: 24rpx;
    }
  }
  .slide-image{
    width: 100vw;
    height: 300rpx;
  }
}
</style>
